<template>
  <div class="notieInfo">
    <div class="notie-main clearfix">
      <div class="notie-content" >
        <!--  {{$t('myAdd.notice.readNum')}} <span class="readQuantity">{{readQuantity}}</span>  阅读量暂时不显示  -->
        <p class="time">{{notieContent.ctime}} &nbsp;&nbsp;&nbsp;  </p>
        <h2>{{notieContent.title}}</h2>
        <div v-html="notieContent.content" class="const"></div>
        <!-- 点赞 -->
        <div class="like" v-if="false">
          <p class="like_help">{{$t('myAdd.notice.help')}}</p>
          <br>
          <button v-if="!isTag" class="likeBtn clickLike" @click="clickLike">
            <img src="../../../static/static/addImg/notice/likeTransparent.png" alt="">{{$t('myAdd.notice.good')}}</button>
          <button v-else="isTag" class="likeBtn cancelLike" @click="cancelLike">
            <img src="../../../static/static/addImg/notice/likeGreen.png" alt=""><span class="addOne" ref="addOneSpan">+1</span><span>{{$t('myAdd.notice.good')}}</span></button>
          <p class="tagQuantity"><span class="tagQuantityVal">{{tagQuantity}}</span>{{$t('myAdd.notice.fellGood')}}</p>
        </div>
      </div>
      <div class="notie-side">
          <div class="article-head">
           {{$t('main.notice')}}
          </div>
          <ul class="notice-list">
            <li v-for="(item,index) in sideList" :key="index" @click="writing(item.id)" :class="{active:isactive === item.id}">{{item.title}}</li>
          </ul>
          <Vpagination v-if="(sidetion.count/sidetion.pageSize) > 1"
                              :total="sidetion.count"
                              :current-page='sidetion.page'
                              :display='sidetion.pageSize'
                              @pagechange="sidechage($event)"
                              class="page">
          </Vpagination>
      </div>

    </div>
  </div>

</template>

<script lang="js">
import Vpagination from '@/components/common/pagination'
export default {
  name: 'notieinfo',
  mounted () {
    if (this.$route.query.ntId) {
      this.isactive = parseFloat(this.$route.query.ntId)
      this.notice_content()
    }
    this.side_list()
  },
  data () {
    return {
      sideList: '',
      notieContent: '',
      sidetion: {
        count: '',
        page: 1,
        pageSize: 10
      },
      isactive: parseFloat(localStorage.getItem('ntId')) || null,
      // 以下是胖虎新增
      readQuantity: null, // 阅读量
      tagQuantity: null, // 点赞liang
      isTag: false // 是否已点赞
    }
  },
  components: {
    Vpagination
  },
  watch: {
    // 切换语言
    '$store.state.baseData._lan' (val, old) {
      if (old) {
        this.side_list('lan')
      }
    }
  },
  methods: {
    // 公告列表
    side_list (source) {
      this.axios({
        url: this.$store.state.url.notice.notice_list,
        headers: {},
        params: {
          page: this.sidetion.page,
          pageSize: this.sidetion.pageSize
        },
        method: 'post'
      }).then((data) => {
        if (data.code === '0') {
          this.sidetion.count = data.data.count
          this.sideList = data.data.noticeInfoList
          // 如果路由没有参数 默认显示第一条数据
          if (!parseFloat(this.$route.query.ntId) || source === 'lan') {
            this.writing(data.data.noticeInfoList[0].id)
          }
        } else {
          this.$store.dispatch('setTipState', {text: data.msg, type: 'error'})
        }
      })
    },
    writing (i) {
      localStorage.setItem('ntId', i)
      this.isactive = i
      this.$router.push({name: 'notice_info', query: { ntId: i }})
      this.notice_content()
    },
    // 公告详情
    notice_content () {
      this.axios({
        url: this.$store.state.url.notice.notice_info,
        headers: {},
        params: {
          id: this.isactive
        },
        method: 'post'
      }).then((data) => {
        if (data.code === '0') {
          this.isTag = data.data.isTag
          this.notieContent = data.data.noticeInfo
          this.tagQuantity = data.data.noticeInfo.tagQuantity
          this.readQuantity = data.data.noticeInfo.readQuantity
          this.notieContent.ctime = this._P.formatTime(data.data.noticeInfo.ctime)
        } else {
          this.$store.dispatch('setTipState', {text: data.msg, type: 'error'})
        }
      })
    },
    // 列表分页
    sidechage (page) {
      this.sidetion.page = page
      this.side_list()
    },
    // 以下是胖虎新增
    // 点赞
    clickLike () {
      this.axios({
        url: this.$store.state.url.notice.clickLike,
        headers: {},
        params: {
          id: this.isactive
        },
        method: 'post'
      }).then((res) => {
        if (res.code.toString() === '0') {
          this.isTag = true
          this.$nextTick(() => {
            this.$refs.addOneSpan.style.display = 'block'
            setTimeout(() => {
              this.$refs.addOneSpan.classList.add('animateAddOne')
            }, 300)
          })
          this.notice_content()
        } else {
          this.$store.dispatch('setTipState', {text: res.msg, type: 'error'})
        }
      }).catch((err) => {
        this.$store.dispatch('setTipState', {text: err.msg, type: 'error'})
      })
    },
    // 取消点赞
    cancelLike () {
      this.axios({
        url: this.$store.state.url.notice.cancelLike,
        headers: {},
        params: {
          id: this.isactive
        },
        method: 'post'
      }).then((res) => {
        if (res.code.toString() === '0') {
          this.isTag = false
          this.notice_content()
        } else {
          this.$store.dispatch('setTipState', {text: res.msg, type: 'error'})
        }
      }).catch((err) => {
        this.$store.dispatch('setTipState', {text: err.msg, type: 'error'})
      })
    }
  },
  computed: {

  }
}
</script>
